<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>人像采集-云校通-教师</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart id="tjjsqj">
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> <a onclick="back()" href="javascript:" class="icon icon-109 f-white">返回</a> </div>
	    	<h1 class="weui-header-title">人像采集</h1>
	    </div>
		<div class="weui_tab_bd">
			<div class="weui_cells afterNone afterNoneBefore mt0">
	            <div class="weui_cells_title" style="line-height: 25px;color: #000;">
	            	<span class="f-red">1.点击“虚线框中的加号”可以上传照片。</span><br/>
	            	<span class="f-red">2.点击“已上传的照片”可以重新上传照片。</span><br/>
	            </div>
	        </div>
	        <div class="weui_cells mt0">
          		<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class="">教师人像采集</p>
		            </div>
	          	</div>
	          	<div class="weui_cell">
	                <div class="weui_cell_hd">
	                	<label class="weui_label">请先选择人员分组</label>
	                </div>
	                <div class="weui_cell_bd weui_cell_primary">
	                    <p><input type="text" class="weui_input weui_cell_ft" name="group" id="group" placeholder="请选择"  data-values="${teacher.faceGroupCode }"/></p>
	                </div>
	            </div>
	          	<div class="logding_select">
					<div class="lod">
						<c:choose>
							<c:when test="${empty teacher.faceImgUrl }">
								<img id="key" onclick="chooseImage()" src="<%=basePath %>/images/add_img.png" class="logding_select_add">
							</c:when>
							<c:otherwise>
								<img id="key" onclick="chooseImage()" src="${config.imgUrl }${teacher.faceImgUrl}" class="logding_select_add" style="object-fit: contain;">
							</c:otherwise>
						</c:choose>
					</div>
				</div>
	        </div>
		</div>
	</div>
	
	<div id="upload_div_box" class="weui_tab tab-bottom" style="display:none; z-index:600; background-color: #f8f8f8;">
		<div class="weui_tab_bd">
	        <div class="weui-header bg-blue"> 
	        	<div class="weui-header-left" onclick="cancelBack()"> <a class="icon icon-109 f-white">取消</a>  </div>
				<h1 class="weui-header-title">人脸上传</h1>
			</div>
			<div class="weui-cells">
	          	<div id="clipArea"></div>
				<input type="file" id="file" accept="image/*" style="display:none">
	    	</div>
	    	<div class="weui-cells">
	    		<div class="weui_cells_title f-red">
	    			<span class="f-red">操作提示：</span><br/>
					<span class="f-red">1.点击下面的“拍照或选取照片”按钮。</span><br/>
					<span class="f-red">2.上面有照片后，两手指在虚线框中挤压缩放照片，把照片缩放成像证件照中的人脸大小，然后再点击下面的“截取并上传”，不能上传全身照或生活照哦。</span>
	    		</div>
	    		<div class="weui_btn_area">
			        <span class="weui_btn bg-green" onclick="file.click()">拍照或选取照片</span>
			    	<span class="weui_btn bg-orange" id="clipBtn">截取并上传</span>
			    </div>
			    <div id="uploadLoading" class="tcenter">
			    </div>
	    	</div>
	    </div>
	</div>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script src="<%=basePath %>/js/picker.js"></script>
<script src="<%=basePath %>/js/select.js"></script>
<script src="<%=basePath %>/js/photoclip/hammer.min.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/photoclip/iscroll-zoom-min.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/photoclip/lrz.all.bundle.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/photoclip/PhotoClip.js" type="text/javascript"></script>
<script type="text/javascript">
	var dataList, ekey, clipArea;
	$(function(){
		initGroup();
	});
	
	function initGroup() {
		$.ajax({
	 		url : basePath + "/common/faceGroup",
	 		type : "get",
	 		dataType : "json",
	 		data: {
	 			groupType: "teacher",
				schoolId: ${teacher.schoolId}
	 		},
	 		async : false,
	 		success : function(data) {
	 			var arr = [];
	 			for(var i in data){
	 		        if (data.hasOwnProperty(i)) {
	 		           if(data[i].indexCode == "${teacher.faceGroupCode}") {
	 		        	   $("#group").val(data[i].name);
	 		           }
	 		           arr.push({title: data[i].name, value: data[i].indexCode})
	 		        };
	 		    }
	 			$("#group").select({
	 		        title: "选择教师组",
	 		        items: arr,
	 		        onChange: function(d) {
	 		        	this.dialog.remove();
	 		        }
	 		    });
	 		}, error:function(){
	 			
      		}
        });
	}
	function cancelBack() {
		$("#upload_div_box").hide();
		clipArea.destroy();
		$("#uploadLoading").html('');
	}
	//拍照或从手机相册中选图接口
    function chooseImage(key) {
    	var groupCode = $("#group").attr("data-values");
    	if(!groupCode){
    		$.alert("请先选择人员分组", "");
    		return;
    	}
    	$("#upload_div_box").show();
    	ekey = key;
    	clipArea = new PhotoClip('#clipArea', {
    		size: [240, 320],
    		outputSize: [480, 640],
    		outputQuality:0.95,
    		file: '#file',
    		view: '#view',
    		ok: '#clipBtn',
    		img: '',
    		loadStart: function() {
    			
    		},
    		loadComplete: function() {
    			
    		},
    		done: function(dataURL) {
    			$("#uploadLoading").html('<img src="<%=basePath %>/images/loading.gif"><p class="f-orange">上传中,请稍候...</p>');
    			wechatMediaDownload(dataURL);
    		},
    		fail: function(msg) {
    			$("#uploadLoading").html('');
    			alert(msg);
    		}
    	});
	}
	function wechatMediaDownload(dataURL) {
		var size = showSize(dataURL);
		if(size >= 200) {
			alert("截取的人脸尽量再近一下");
			return;
		}
        $.ajax({
	 		url : basePath + "/ls/my/faceUpload",
	 		type : "post",
	 		data : {
	 			faceUrl: dataURL,
	 			groupName: $("#group").val(),
	 			groupCode: $("#group").attr("data-values"),
	 			groupType: "teacher"
	 		},
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			$("#uploadLoading").html('');
	 			if(data.code != '000') {
	 				alert(data.data.error_msg, "");
	 				return;
	 			}else {
	 				$("#key").attr("src", imgUrl + data.data.fileUrl + "?v=" + new Date().getTime());
	 				cancelBack();
	 			}
	 		}, error:function(){
	 			alert("上传异常", "");
      		}
	 	});
   }

	function showSize(base64url) {
        //获取base64图片大小，返回MB数字
        var str = base64url.replace('data:image/png;base64,', '');
        var equalIndex = str.indexOf('=');
        if(str.indexOf('=')>0) {
            str=str.substring(0, equalIndex);
        }
        var strLength=str.length;
        var fileLength=parseInt(strLength-(strLength/8)*2);
        // 由字节转换为MB
        var size = "";
        size = (fileLength/(1024)).toFixed(2);
        var sizeStr = size + "";                        //转成字符串
        var index = sizeStr.indexOf(".");                    //获取小数点处的索引
        var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
        if(dou == "00"){                                //判断后两位是否为00，如果是则删除00                
            return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
        }
        return parseInt(size);
    }
</script>
</html>